<template>
  <div class="about">
    <el-container>
      <el-main>
        <el-row class="row-1">
          <div class="header">
            <el-col :span="8">
              <ul>
                <li><el-link type="warning">请登录</el-link></li>
                <li><el-link type="warning">免费注册</el-link></li>
                <li><el-link type="warning">手机逛淘宝</el-link></li>
              </ul>
            </el-col>
            <el-col :span="16">
              <ul>
                <li class="orange"><a href="#">淘宝网首页</a></li>
                <li>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      我的淘宝<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>已买到宝贝</el-dropdown-item>
                      <el-dropdown-item>我的足迹</el-dropdown-item>
                      <el-dropdown-item>我的上新</el-dropdown-item>
                      <el-dropdown-item>爱逛街</el-dropdown-item>
                      <el-dropdown-item>淘宝达人</el-dropdown-item>
                      <el-dropdown-item>新欢</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
                <li>
                  <span class="el-dropdown-link">
                    <i class="el-icon-shopping-cart-2"></i>
                    购物车<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                </li>
                <li>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      <i class="el-icon-star-on"></i>
                      收藏夹<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>收藏的宝贝</el-dropdown-item>
                      <el-dropdown-item>收藏的店铺</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
                <li>
                  <a href="#">商品分类</a>
                </li>
                <li>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      <i class="el-icon-star-on"></i>
                      卖家中心<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>免费开店</el-dropdown-item>
                      <el-dropdown-item>已卖出的宝贝</el-dropdown-item>
                      <el-dropdown-item>出售中的的宝贝</el-dropdown-item>
                      <el-dropdown-item>卖家服务市场</el-dropdown-item>
                      <el-dropdown-item>卖家培训中心</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
                <li>
                  <a href="#">联系客服</a>
                </li>
                <li>
                  <span class="el-dropdown-link">
                    <i class="el-icon-s-unfold"></i>
                    网站导航<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                </li>
              </ul>
            </el-col>
          </div>
        </el-row>
        <div class="logo">
          <el-row>
            <el-col :span="6">
              <img src="../assets/about/logo.png" alt="" />
            </el-col>
            <el-col :span="18">
              <el-row>
                <el-col :span="20">
                  <el-input
                    class="search"
                    placeholder="请输入内容"
                    v-model="input"
                    clearable
                  >
                  </el-input>
                  <div class="li">
                    <a href="#">一淘限时购</a>
                    <a href="#">连衣裙</a>
                    <a href="#">外套女</a>
                    <a href="#">牛仔裤</a>
                    <a href="#">老爹鞋</a>
                    <a href="#">扫地机器人</a>
                    <a href="#">眼影盘</a>
                    <a href="#">手机壳</a>
                    <a href="#">男衬衣</a>
                    <a href="#">乐高玩具</a>
                    <a href="#">养生壶</a>
                  </div>
                </el-col>
                <el-col :span="4">
                  <button class="anniu">搜索</button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>

        <div class="banner">
          <el-row>
            <el-col :span="24">
              <img src="../assets/about/banner.jpg" alt="" />
            </el-col>
          </el-row>
        </div>

        <div class="main">
          <div class="rmhd">
            <h1><img class="adornment" src="../assets/about/adornment.png" alt="" style="width:120px;">{{ res.remenhuodong.h1 }}<img class="adornment" src="../assets/about/adornment2.png" alt="" style="width:120px;"></h1>
            <el-row :gutter="5">
              <el-col
                :span="8"
                v-for="(item, index) in res.remenhuodong.img"
                :key="index"
              >
                <img :src="item.src1" alt="" />
              </el-col>
            </el-row>
          </div>

          <div class="nzrm">
            
            <h1><img class="adornment" src="../assets/about/adornment.png" alt="" style="width:120px;">{{ res.nvzhuangremai.h1 }}<img class="adornment" src="../assets/about/adornment2.png" alt="" style="width:120px;"></h1>
            <el-row :gutter="10" class="kuang">
              <el-col
                :span="5"
                class="nvzhuang"
                v-for="(item, index) in res.nvzhuangremai.pics"
                :key="index"
              >
                <img :src="item.src2" alt="" />
                <p>{{ item.p }}</p>
                <span class="key">{{ item.key }}</span>
                <span class="price">{{ item.price }}</span>
                <small>{{ item.small }}</small>
              </el-col>
            </el-row>
            <el-button
              class="more"
              @click="drawer = true"
              type="primary"
              style="margin-left: 16px"
            >
              更多
            </el-button>

            <el-drawer
              title="我是标题"
              :visible.sync="drawer"
              :with-header="false"
            >
              <div class="all">
                <div class="kouhong" v-for="(item, index) in res.more.pic"
                :key="index">
                  <img :src="item.src3" alt="" style="width:88px;">
                  <p><a href="#">{{ item.p }}</a></p>
                  <small><a href="#">{{ item.small }}</a></small>
                  <span><a href="#">{{ item.span }}</a></span>
                  <el-divider></el-divider>
                </div>
                
              </div>
            </el-drawer>
          </div>
        </div>

        <div class="footer">
          <el-row>
            <el-col :span="1-5"
              v-for="(item, index) in res.footer.pics2"
              :key="index">
              <a href="#">{{ item.a }}</a>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="1-5"
              v-for="(item, index) in res.footer.pics3"
              :key="index">
              <a href="#">{{ item.a }}</a>
            </el-col>
          </el-row>
          <div class="biao">
            <img src="../assets/about/f-1.png" alt="">
            <img src="../assets/about/f-2.gif" alt="">
            <img src="../assets/about/f-3.png" alt="">
          </div>

        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
let dataSource = {
  more:{
    pic:[
      {
        src3:require("../assets/about/more-kouhong.png"),
        p:"完美日记天鹅绒金丝绒唇釉口红女学生雾面哑光平价唇彩唇蜜持久",
        small:"价格¥ 119.00",
        span:"促销价¥ 59.90 ",
      },
      {
        src3:require("../assets/about/qingwa.jpg"),
        p:"青蛙王子儿童面霜秋冬季宝宝霜婴儿润肤乳保湿滋润补水擦脸身体乳",
        small:"价格¥ 99.00",
        span:"促销价¥ 29.90 ",
      },
      {
        src3:require("../assets/about/luosifen.jpg"),
        p:"李子柒螺蛳粉广西特产柳州螺丝粉速食方便面米线螺狮粉3袋装",
        small:"价格¥ 77.00",
        span:"促销价¥ 34.70 ",
      },
    ]
  },
  remenhuodong: {
    h1: "聚划算热门活动",
    img: [
      {
        src1: require("../assets/about/rmhd-1.webp"),
      },
      {
        src1: require("../assets/about/rmhd-2.webp"),
      },
      {
        src1: require("../assets/about/rmhd-3.webp"),
      },
    ],
  },
  nvzhuangremai: {
    h1: "聚划算-女装热卖榜",
    pics: [
      {
        src2: require("../assets/about/nztm-1.webp"),
        p: "仿羊绒堆堆领针织内搭打底...",
        key: "免费试穿赠送运费",
        price: "¥39.9",
        small: "¥68",
      },
      {
        src2: require("../assets/about/nztm-2.webp"),
        p: "加绒运动裤女裤宽松秋款...",
        key: "最后10件 速抢",
        price: "¥14.9",
        small: "¥19.9",
      },
      {
        src2: require("../assets/about/nztm-3.webp"),
        p: "莫代尔半高领打底衫春秋...",
        key: "免费试穿赠送运费",
        price: "¥29.9",
        small: "¥56",
      },
      {
        src2: require("../assets/about/nztm-4.webp"),
        p: "光腿肉色打底裤女外穿薄款...",
        key: "5.8包邮光腿神器",
        price: "¥9.9",
        small: "¥8.8",
      },
      {
        src2: require("../assets/about/nztm-5.webp"),
        p: "秋冬新款套头毛衣女士修身...",
        key: "抢34元最后100件",
        price: "¥39",
        small: "¥399",
      },
      {
        src2: require("../assets/about/nztm-6.webp"),
        p: "鸭鸭2020年新款羽绒服女短...",
        key: "5.8包邮光腿神器",
        price: "¥99",
        small: "¥249",
      },
      {
        src2: require("../assets/about/nztm-7.webp"),
        p: "2020春秋新款灰色纯棉打底...",
        key: "15.6元包邮",
        price: "¥18.6",
        small: "¥29",
      },
      {
        src2: require("../assets/about/nztm-8.webp"),
        p: "2件装 黑白色莫代尔内搭美背...",
        key: "赠送运费免费试穿",
        price: "¥17",
        small: "¥36",
      },
    ],
  },
  footer:{
    pics2:[
      {
        a:"阿里巴巴集团",
      },
      {
        a:"淘宝网",
      },
      {
        a:"天猫",
      },
      {
        a:"聚划算",
      },
      {
        a:"全球速卖通",
      },
      {
        a:"阿里巴巴国际交易市场",
      },
      {
        a:"1688",
      },
      {
        a:"阿里妈妈",
      },
      {
        a:"飞猪",
      },
      {
        a:"阿里云计算",
      },
      {
        a:"阿里通信",
      },
      {
        a:"阿里星球",
      },
    ],
    pics3:[
      {
        a:"友盟"
      },
      {
        a:"虾米",
      },
      {
        a:"UC",
      },
      {
        a:"钉钉",
      },
      {
        a:"达摩院",
      },
    ],
  },
};

export default {
  data() {
    return {
      input: "",
      res: dataSource,
      drawer: false,
    };
  },
};
</script>

<style scoped>
.row-1 {
  background: #f5f5f5;
}

.header {
  border-bottom: 1px solid #eee;
  height: 50px;
  width: 1200px;
  margin: auto;
}
.logo {
  width: 1200px;
  margin: auto;
  margin-top: 10px;
}

li {
  float: left;
  list-style: none;
  margin-left: 10px;
}

/* 下拉菜单 */
.el-dropdown-link {
  cursor: pointer;
  color: #6c6c6c !important;
}
.el-icon-arrow-down {
  font-size: 12px;
}

a {
  text-decoration: none;
  color: #6c6c6c !important;
}

.orange a {
  color: #f22e00;
}

.anniu {
  margin-left: -58px;
  height: 46px;
  width: 80px;
  background: #f03726;
  border: none;
  color: #f5f5f2;
  font-size: 18px;
}

.el-input {
  border: 3px solid #f03726;
}

.li {
  margin-top: 10px;
  font-size: 13px;
}

.li a {
  padding: 8px;
  color: #9b9b9b !important;
}

.li a:hover {
  color: #fd3f31 !important;
  text-decoration: underline;
}

.banner {
  margin-top: 10px;
}

.banner img {
  width: 1463px;
}

.rmhd {
  width: 1200px;
  margin: auto;
}

.rmhd img {
  width: 323px;
}

h1 {
  color: #fff;
  margin-top: 20px;
  font-size: 32px;
  font-weight: 400;
}

.main {
  background: brown;
  margin-top: -24px;
}

.nzrm {
  width: 1200px;
  margin: auto;
}

.mzrm {
  width: 1200px;
  margin: auto;
}

.mzrm img {
  width: 240px;
}

.nzrm img {
  width: 240px;
}

.el-col-5 {
  background: #fff;
  margin: 25px;
}

p {
  text-align: left;
}

.key {
  display: block;
  text-align: left;
  width: 100px;
  font-size: 12px;
  /* padding-left: 20px; */
  border: 1px solid #f03726;
  color: #f03726;
}

.price {
  color: #f22e00;
  text-align: left;
  margin-left: -150px;
  font-size: 25px;
}

small {
  color: #6c6c6c;
  text-decoration: line-through;
  text-align: left;
}

.more{
  background:#fff ;
  border: none;
  color: #f03726;
  font-weight: 700;
  margin: 10px;
}

.footer{
  width: 1200px;
  margin: auto;
  font-size: 12px;
  margin-top: 10px;
}

.footer a{
  padding: 10px;
}

.footer a:hover{
  color: #000!important;
  text-decoration: underline;
}

.biao{
  /* margin-left: -50px; */
  position: relative;
  left: -510px;
}
.biao img{
  width: 40px;
  padding: 10px;
}

.adornment {
  margin-left: -45px;
}

.all{
  font-weight: 700;
}

.all span a{
  color: #f03726!important;
}

.all a:hover{
  text-decoration: underline;
  color: #f03726!important;
}
</style>